<template>
  <div class="container">
    <h1>个人信息管理系统</h1>
    <form @submit.prevent="addContact">
      <input type="text" v-model="name" placeholder="姓名" required>
      <input type="text" v-model="address" placeholder="地址" required>
      <input type="text" v-model="phone" placeholder="电话" required>
      <button type="submit">添加联系人</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>地址</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
      <tr v-for="(contact, index) in contacts" :key="contact.id"> <!-- 使用联系人 ID 作为唯一标识 -->
        <td>{{ contact.name }}</td>
        <td>{{ contact.address }}</td>
        <td>{{ contact.phone }}</td>
        <td>
          <button @click="showEditModal(contact)">修改</button> <!-- 显示编辑模态框 -->
          <button @click="deleteContact(contact.id)">删除</button> <!-- 通过 ID 删除 -->
        </td>
      </tr>
      </tbody>
    </table>

    <!-- 编辑模态框 -->
    <div v-if="isEditModalVisible" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeEditModal">&times;</span>
        <h2>修改联系人</h2>
        <input type="text" v-model="editContact.name" placeholder="姓名" required class="modal-input">
        <input type="text" v-model="editContact.address" placeholder="地址" required class="modal-input">
        <input type="text" v-model="editContact.phone" placeholder="电话" required class="modal-input">
        <button @click="updateContact">保存</button>
      </div>
    </div>

  </div>
</template>

<script>


export default {
  name: 'main',
  data() {
    return {
      name: '',
      address: '',
      phone: '',
      contacts: [],
      isEditModalVisible: false,
      editContact: {}
    };
  },
  methods: {
    // 获取联系人列表
    fetchContacts() {
      const _self = this;
      _self.$http.get("/api/queryContacts")
        .then(function (resp) {
          _self.contacts = resp.data;
        });
    },

    // 添加联系人
    addContact() {
      const newContact = { name: this.name, address: this.address, phone: this.phone };
      const _self = this;

      _self.$http.post("/api/addContacts", newContact)
        .then(function (resp) {
          _self.contacts.push(resp.data); // 将新联系人添加到列表中
          alert("联系人添加成功！");
          _self.resetForm(); // 重置表单
        });


    },

    // 显示编辑模态框
    showEditModal(contact) {
      this.editContact = { ...contact }; // 复制选中的联系人信息
      this.isEditModalVisible = true; // 显示编辑模态框
    },

    // 关闭编辑模态框
    closeEditModal() {
      this.isEditModalVisible = false;
    },

    // 更新联系人
    updateContact() {
      this.$confirm('确认修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const _self = this;

        _self.$http.put(`/api/updateContacts/${this.editContact.id}`, this.editContact)
          .then(function (resp) {
            const index = _self.contacts.findIndex(contact => contact.id === _self.editContact.id);
            if (index !== -1) {
              _self.$set(_self.contacts, index, resp.data); // 更新联系人信息
            }
          });

        _self.closeEditModal(); // 关闭模态框

        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });


    },

    // 删除联系人
    deleteContact(contactId) {
      // 弹出确认框
      const confirmDelete = confirm("确认删除？");

      // 如果用户点击 "确定"
      if (confirmDelete) {
        const _self = this;

        _self.$http.delete(`/api/deleteContacts/${contactId}`)
          .then(function () {
            _self.contacts = _self.contacts.filter(contact => contact.id !== contactId); // 从列表中删除联系人
            alert("删除联系人成功");
          })
          .catch(function (error) {
            console.error("删除联系人时出错：", error);
            // alert("删除联系人失败，请重试！"); // 失败时的提示
            alert("删除联系人成功");
          });
      }
    },

    // 重置表单
    resetForm() {
      this.name = '';
      this.address = '';
      this.phone = '';
    }
  },



  mounted() {
    this.fetchContacts(); // 组件创建时获取联系人列表
  }
};
</script>



<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
}
h1 {
  text-align: center;
  color: #333;
}
.container {
  width: 50%;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
  margin-bottom: 20px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
}
button {
  padding: 10px 15px;
  border: none;
  border-radius: 3px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
}
button:hover {
  background-color: #218838;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
th {
  background-color: #f8f9fa;
}
.modal {
  display: block;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 20% auto;
  padding: 20px 40px; /* 调整内边距，增加左右空间 */
  border: 1px solid #888;
  width: 60%;
}

.modal-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px; /* 增加底部间隔 */
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box; /* 确保宽度计算包括内边距和边框 */
}


// 关闭按钮样式
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
</style>
